<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="vendor/ddl/viz.js"></script>
    <script type="text/javascript" src="vendor/ddl/full.render.js"></script>
</head>

<body>
<form onsubmit="handleSubmit(); return false;">
    <div><textarea rows="30" cols="60" id="inputText" placeholder="Please input DDL DAG"></textarea></div>
    <button type="submit">Submit</button>
</form>

<script>
    function show(text) {
        var viz = new Viz();
        viz.renderSVGElement(text)
            .then(function (element) {
                document.body.appendChild(element);
            })
            .catch(error => {
                // Create a new Viz instance (@see Caveats page for more info)
                viz = new Viz();

                // Possibly display the error
                console.error(error);
            });
    }

    function handleSubmit() {
        const text = document.getElementById('inputText').value;
        show(text);
    }

    // function getQueryVariable(variable) {
    //     let query = window.location.search.substring(1);
    //     let vars = query.split("&");
    //     for (let i = 0; i < vars.length; i++) {
    //         let pair = vars[i].split("=");
    //         if (pair[0] == variable) {
    //             return pair[1];
    //         }
    //     }
    //     return (false);
    // }
</script>
</body>
</html>
